<template>
    <div class="header">
        <!-- <div class="logo"><img src="../../../static/img/logo.png" style="margin-top:5px;"/></div> -->
        <div class="user-info">
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link" style="color:rgb(72, 106, 106)">
                    <img class="user-logo" src="../../../static/img/img.jpg">
                    {{username}}
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="changepwd">修改密码</el-dropdown-item>
                    <el-dropdown-item command="loginout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div>
            <el-dialog title="修改密码" :visible.sync="dialogVisible" size="tiny" >
                 <el-form :model="ruleForm" ref="ruleForm" label-width="" class="demo-ruleForm">
                    <div>验证手机号码 {{formatterUsername().substring(0,3) }}****{{formatterUsername().substring(7,11) }}</div>
                    <el-form-item label="" prop="valicode">
                        <el-input v-model="ruleForm.valicode" style="width:200px;float:left;"></el-input>
                        <el-button  style="float:left;margin:0 10px" @click="sendvalicode" :disabled="valicodeIsDisable">{{valicodetext}}</el-button>
                    </el-form-item>
                    <el-form-item label="" prop="">
                        <el-button type="primary" @click="next">下一步</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <el-dialog title="修改密码" :visible.sync="dialogVisible2" size="tiny" >
                <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
                  <el-form-item label="新密码" prop="password">
                    <el-input type="password" v-model="ruleForm2.password"></el-input>
                  </el-form-item>
                  <el-form-item label="重复密码" prop="repassword">
                    <el-input type="password" v-model="ruleForm2.repassword"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button @click="changePassword">修改密码</el-button>
                  </el-form-item>
                </el-form>
            </el-dialog>
        </div>
        <div >
            <el-dialog title="修改密码" :visible.sync="uploadDialog" size="tiny" >
                 <i class="el-icon-loading"></i>
            </el-dialog>
        </div>

    </div>
</template>
<script>
import $ from 'jquery';
export default {
    data() {
        return {
            name: 'linxin',
            phone:'',
            dialogVisible:false,
            valicodeIsDisable:false,
            valicodetext:'发送验证码',
            validtime:60,

            ruleForm:{
                valicode:'',
            },
            rules:{
                valicode:[{
                   validator: this.validCodeCheck, trigger: 'blur'
                }]
            },

            ruleForm2:{
                password:'',
                repassword:'',
            },
            rules2:{
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 18, message: '密码长度在 6 到 18 个字符', trigger: 'blur' }
                ],
                repassword: { validator: this.validPass, trigger: 'blur' }
            },
            dialogVisible:false,
            dialogVisible2:false,
            canChangPassword:true,
        }
    },
    beforeCreate(){
        var token = localStorage.getItem('user_token');
        if (!token) {
            localStorage.setItem("is_forbidden",new Date());
            var loginUrl = localStorage.getItem('login_url');
            window.location.href = loginUrl + "#/";
        }
    },
    created() {
        // let self = this;
        // self.checkToken();
        // self.myajax("/shopStaff/isShopStaff",{},function(data){
        //     if (data.code === 2000) {
        //         self.canChangPassword = !(data.data);
        //         console.log(self.canChangPassword);
        //     }
        // })
    },
    computed: {
        username() {
            let username = localStorage.getItem('ms_username');
            return username ? username : this.name;
        }
    },
    methods: {
        formatterUsername(){
            let self = this;
            let username = localStorage.getItem('ms_username');
            if (!username) {
                username = this.name;
            }
            // if (username == 'admin') {
            //     self.myajax("/user/getAdminPhone",{},function(data){
            //         if (data) {
            //             username = data.toString();
            //         }
            //     })
            // }
            return username;
            
        },
        checkToken(){
            let self = this;
            var token = localStorage.getItem('user_token');
            if (!token) {
                $.tooltip("账户账户未登陆", 3000);
                self.$router.push('/login');
            }
        },
        handleCommand(command) {
            var self=this;
            if (command == 'loginout') {
                self.myajax("/logout",{},function(data){
                    if (data.code === 2000) {
                    }
                })
                localStorage.removeItem('ms_username');
                localStorage.removeItem('user_token');
                localStorage.removeItem('shopId');
                this.$router.push('/login');
            }else if(command == 'changepwd'){
                self.ruleForm.valicode='';
                self.ruleForm2.password='';
                self.ruleForm2.repassword='';
                self.dialogVisible=true;
            }
        },
        sendvalicode(){
            var self=this;
            self.valicodeIsDisable=true;
            // self.myajax("/user/sendPasswordCode",{"phone":self.username},function(data){
            //     if(data.code==2000){
            //       self.validtime=60;
            //       self.valicodetext="剩余"+self.validtime+"s";
            //       window.interVali=setInterval(self.valitime,1000);
            //        $.tooltip("发送成功",3000,true);
            //     }else{
            //       $.tooltip(data.msg,3000);
            //       clearInterval(window.interVali);
            //       self.valicodeIsDisable=false;
            //       self.valicodetext="发送验证码";
            //    }
            // })
        },
        valitime(){
            var self=this;
            self.valicodetext="剩余"+self.validtime+"s";
            self.validtime=self.validtime-1;
            if(self.validtime<0){
                self.valicodeIsDisable=false;
                clearInterval(window.interVali);
                self.valicodetext="发送验证码";
            }
        },
        next(){
            var self=this;
            this.$refs['ruleForm'].validate((valid) => {
                if(valid){
                    var valicodeCheck = self.validcode(null,self.ruleForm.valicode,function(){});
                    if (!valicodeCheck) {
                        $.tooltip("请输入正确的验证码", 3000);
                        return;
                    }
                    this.dialogVisible=false;
                    this.dialogVisible2=true;
                }
            });
        },
        validcode(rule, value, callback){
            var self=this;
            if (value === '') {
              callback(new Error('请输入验证码'));
              return false;
            } else {
                if(value.length!=6){
                    callback(new Error('请输入正确的验证码'));
                    return false;
                }else{
                    var data={code:value,phone:self.username};
                    var backcode=true;
                    // self.myajax("/user/valiRePassword",data,function(data){
                    //     if(data.code==2000){
                    //         callback();
                    //     }else{
                    //         callback(new Error(data.msg));
                    //         backcode=false;
                    //     }
                    // });
                    return backcode;
                }
            }
        },
        validPass(rule, value, callback){
            if (value === '') {
              callback(new Error('请重复密码'));
              return false;
            } else {
                if (this.ruleForm.password !== '') {
                    if(value!=this.ruleForm2.password){
                        callback(new Error('重复密码不正确'));
                        return false;
                    }
                    callback();
                }else{
                    return false;
                }
            }
        },
        changePassword(){
            var self=this;
            var phone = self.username;
            var valicode=self.ruleForm.valicode;
            var password=self.ruleForm2.repassword;
            var data={
                phone:phone,
                valicode:valicode,
                password:password
            }
            this.$refs['ruleForm2'].validate((valid) => {
                if(valid){
                    // self.myajax("/user/changePassword",data,function(data){
                    //     if(data.code==2000){
                    //         $.tooltip('修改成功', 2500, true);
                    //         self.dialogVisible=false;
                    //         self.dialogVisible2=false;
                    //     }else{
                    //         $.tooltip(data.msg, 3000);
                    //     }
                    // })
                }
            });

        }
    }
}
</script>
<style scoped>
.header {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 70px;
    font-size: 22px;
    line-height: 70px;
    color: #fff;
}

.header .logo {
    float: left;
    width: 250px;
    text-align: center;
}

.user-info {
    float: right;
    padding-right: 50px;
    font-size: 16px;
    color: #fff;
}

.user-info .el-dropdown-link {
    position: relative;
    display: inline-block;
    padding-left: 50px;
    color: #fff;
    cursor: pointer;
    vertical-align: middle;
}

.user-info .user-logo {
    position: absolute;
    left: 0;
    top: 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.el-dropdown-menu__item {
    text-align: center;
}
</style>
